<style lang="less">
@import "@/styles/table-common.less";
.btn-box {
  // padding: 10px 12px 10px 0;
  height: 32px;
  display: flex;
  align-items: center;
  span {
    margin-left: 15px;
  }
}
.detail-modal {
  .form {
    div {
      display: flex;
      margin-bottom: 10px;
      span {
        width: 130px;
      }
      input {
        flex: 1;
        border: 1px solid #e8eaec;
        outline: none;
        text-indent: 16px;
        color: #515a6e;
      }
    }
  }
  .refund-num {
    margin-top: 15px;
  }
}
</style> 
<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          <FormItem label="订单类型">
            <Select v-model="searchForm.orderType" style="width: 200px">
              <Option
                v-for="item in orderType"
                :value="item.type"
                :key="item.type"
                >{{ item.name }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="创建时间">
            <DatePicker
              :options="options"
              v-model="selectDate"
              type="daterange"
              format="yyyy-MM-dd"
              clearable
              @on-change="selectDateRange"
              placeholder="选择起始时间"
              style="width: 200px"
            ></DatePicker>
          </FormItem>
          <FormItem label="用户名称">
            <Input
              type="text"
              v-model="searchForm.realName"
              clearable
              placeholder="请输入用户名称"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="用户id">
            <Input
              type="text"
              v-model="searchForm.uid"
              clearable
              placeholder="请输入用户id"
              style="width: 200px"
            />
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
        <template slot-scope="{ row }" slot="print">{{
          row.print.serialNo
        }}</template>
        <template slot-scope="{ row }" slot="operation">
          <div>
            <a
              v-if="row.payPrice == 0 || row.payPrice != row.refundPrice"
              @click="chageable(row, 1)"
              >全额退款</a
            >
            <Divider
              type="vertical"
              v-if="row.payPrice != row.refundPrice && row.verifyCode"
            />
            <a
              @click="chageable(row, 2)"
              v-if="row.payPrice != row.refundPrice && row.verifyCode"
              >部分退款</a
            >
          </div>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>

    <Modal
      v-model="modal1"
      :title="refundDesc"
      @on-ok="handleset(2)"
      @on-cancel="handleCancle"
      width="800"
    >
      <div class="detail-modal" v-if="modal1">
        <!-- <div class="form">
          <div>
            <span>订单编号</span
            ><input type="text" readonly :value="detailData.orderNo" />
          </div>
          <div>
            <span>订单发起人</span
            ><input type="text" readonly :value="detailData.realName" />
          </div>
          <div>
            <span>订单发起时间</span
            ><input type="text" readonly :value="detailData.createTime" />
          </div>
        </div> -->
       
        <Table
          border
          ref="orderActives"
          @on-change="handleRowChange"
          :columns="columns1"
          :data="currentData.orderActives"
        >
          <template
            slot="activeName"
            slot-scope="{ row }"
            v-if="searchForm.orderType != 9"
          >
            {{ currentData.orderDetails[0].productName }}
          </template>
        </Table>
        <div
          style="
            display: flex;
            white-space: nowrap;
            margin: 20px;
            align-items: center;
          "
        >
          <span v-if="searchForm.orderType != 9"
            >未激活次数{{
              currentData.verifyCodeNum - currentData.orderActives.length
            }}</span
          >

          <Input
            v-model="count"
            type="number"
            placeholder="请输入次数"
            v-if="searchForm.orderType != 9"
            :max="
              Number(
                currentData.verifyCodeNum - currentData.orderActives.length
              )
            "
          />
          <Input
            v-model="price"
            placeholder="请输入退款金额"
            v-if="searchForm.orderType == 9"
          />
        </div>
        <div style="margin: 20px">
          <Input
            v-model="text"
            type="textarea"
            :rows="4"
            placeholder="请输入退款说明"
          />
        </div>
      </div>
    </Modal>
    <Modal
      v-model="modal0"
      :title="refundDesc"
      @on-ok="handleset(1)"
      @on-cancel="handleCancle"
    >
      <div class="detail-modal">
      
        <Input
          v-model="text"
          type="textarea"
          :rows="4"
          placeholder="请输入退款说明"
        />
      </div>
    </Modal>
  </div>
</template>

<script>
import {
  getScOrderByCondition,
  scOrderRefund,

} from "@/api/index";

import { shortcuts } from "@/libs/shortcuts";

// import addEdit from "./addEdit.vue";
export default {
  name: "user-manage",
  components: {
    // addEdit,
  },
  data() {
    return {
      currentData: {},
      refundDesc:"",
      modal0: false,
      modal1: false,
      RefundInfo: {},
      text: "", //退款原因
      orderType: [
        {
          name: "商铺订单",
          type: 1,
        },
        {
          name: "培训机构订单",
          type: 2,
        },
        // {
        //     name:'扫码支付订单',
        //     type:3
        // },
        {
          name: "会议室订单",
          type: 3,
        },
        {
          name: "场地预定订单",
          type: 4,
        },
        {
          name: "活动订单",
          type: 5,
        },
        {
          name: "储物柜订单",
          type: 6,
        },
        {
          name: "角色订单管理",
          type: 7,
        },
        // {
        //   name: "储值订单",
        //   type: 8,
        // },
        {
          name: "打印订单",
          type: 9,
        },
      ],
      message: "",
      //   height: 510,
      //   showUser: false,
      //   showType: "0",
      loading: true,
      selectDate: "",
      openSearch: true,
      options: {
        shortcuts: shortcuts,
      },
      searchForm: {
        orderType: 1,
        pageNumber: 1,
        // pageSize: '',
        sort: "createTime",
        order: "desc",
      },
      columns: [
        // {
        //   type: "selection",
        //   width: 60,
        //   align: "center",
        //   fixed: "left",
        // },
        {
          title: "订单编号",
          key: "orderNo",

          fixed: "left",
        },

        {
          title: "订单发起人",
          key: "realName",
        },
        {
          title: "订单发起时间",
          key: "createTime",
        },
        {
          title: "总价",
          key: "totalPrice",
        },

        {
          title: "支付类型",
          key: "payType",
          width: 100,
          render: (h, params) => {
            let txt = this.publicFun.paySubType(params.row.paySubType);
            return h("span", [txt]);
          },
        },
        {
          title: "退款总额",
          key: "refundSumPrice",
          width: 100,
          align: "center",
        },
        {
          title: "退还积分",
          key: "backIntegral",
          width: 100,
          align: "center",
        },
        {
          title: "退款状态",
          key: "refundStatus",
          width: 100,
          align: "center",
          render: (h, params) => {
            let txt = "";
            console.log("params:", params.row.refundStatus);
            switch (params.row.refundStatus) {
              case 0:
                txt = "正常";
                break;
              case -1:
                txt = "退款中";
                break;
              case -2:
                txt = "部分退款";
                break;
                   case -3:
                txt = "已退款";
                break;
            }
            console.log("txt:", txt);
            return h("span", [txt]);
          },
        },

        {
          title: "订单状态",
          key: "status",
          width: 100,
          render: (h, params) => {
            let txt = this.publicFun.orderStatus(params.row.status);
            return h("span", [txt]);
          },
        },

        {
          title: "操作",
          key: "",
          width: 220,
          align: "center",
          fixed: "right",
          slot: "operation",
        },
      ],
      modal: false,
      columns2: [],
      columns0: [
        {
          title: "打印机编号",
          key: "serialNo",
          align: "center",
        },
        {
          title: "打印名称",
          key: "title",
          align: "center",
        },
        {
          title: "打印页数",
          key: "nums",
          align: "center",
        },
        {
          title: "*元，每页",
          key: "price",
          align: "center",
        },
      ],
      columns1: [
        {
          type: "selection",
          width: 60,
          align: "center",
          fixed: "left",
        },
        {
          title: "活动名称",
          key: "name",
          slot: "activeName",
          align: "center",
        },
        {
          title: "激活人",
          key: "name",
          align: "center",
        },
        {
          title: "激活人手机",
          key: "mobile",
          align: "center",
        },
        {
          title: "激活时间",
          key: "createTime",
          align: "center",
        },
      ],
      data: [],
      detailData: [],
    };
  },
  methods: {
    
    init() {
      this.getDataList();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getScOrderByCondition(this.searchForm).then((res) => {
        this.loading = false;
        if (res.success) {
          // this.data = res.result
          this.data = res.result.content;
          this.total = res.result.totalElements;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    // add() {
    //   this.showType = "2";
    //   this.showUser = true;
    // },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0] + " 00:00:00";
        this.searchForm.endDate = v[1] + " 00:00:00";
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.getDataList();
    },
    handleReset() {
      this.selectDate = "";
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.realName = "";
      this.searchForm.uid = "";

      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    enable(v) {
      this.$Modal.confirm({
        title: "确认启用",
        content: "您确认要启用用户 " + v.title + " ?",
        loading: true,
        onOk: () => {
          enableUser(v.id).then((res) => {
            this.$Modal.remove();
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
            }
          });
        },
      });
    },
    handleRowChange(currentRow, oldCurrentRow) {
      console.log(currentRow);
      console.log(oldCurrentRow);
    },
    handleCancle() {
      this.modal0 = false;
      this.modal1 = false;
      this.text = "";
      this.price = "";
      this.count = "";
    },
    handleset(type) {
      this.$Modal.confirm({
        title: "提示",
        // 记得确认修改此处
        content: "确认要退款吗？",
        onOk: () => {
          let v = this.currentData;
          // console.log(this.$refs.orderActives.getSelection());
          let data = {};
          if (type == 2) {
            //部分退款
            if (this.searchForm.orderType == 9) {
              data = {
                type: type,
                orderId: v.id,
                text: this.text,
                price: this.price,
              };
            } else {
              data = {
                type: type,
                orderId: v.id,
                text: this.text,
                count: this.count,
              };
              let arr = this.$refs.orderActives.getSelection();
              arr.forEach((e, index) => {
                data["orderActiveIds[" + index + "]"] = e.id;
              });
            }
          } else if (type == 1) {
            //全额退款
            data = {
              type: type,
              orderId: v.id,
              price: v.payPrice - v.refundPrice,
              text: this.text,
            };
          }
          scOrderRefund(data).then((res) => {
            this.modal0 = false;
            this.modal1 = false;
            if (res.success) {
              this.$Message.success("操作成功");
              this.getDataList();
              this.text = "";
              this.price = "";
              this.count = "";
            }
          });
        },
      });
    },
    chageable(v, status) {
      this.currentData = v;
this.refundDesc = "退款商品明细："
this.currentData.orderDetails.forEach(item=>{
this.refundDesc = this.refundDesc+item.productName+"、"
})
      if (status == 2) {
        //部分退款
        this.modal1 = true;
        if (this.searchForm.orderType == 9) {
          this.columns2 = this.columns0;
        } else {
          this.columns2 = this.columns1;
        }
      } else if (status == 1) {
        //全额退款
        this.modal0 = true;
      }
    },
  },
  created() {},
  mounted() {
    // 计算高度
    this.height = Number(document.documentElement.clientHeight - 230);
    this.init();
  },
};
</script>